<template>
  <view class="sign-page">
    <view id="render-dom" class="protol-wrapper">
      <view class="content draw_cnode" data-type="text" :data-text="nodes">
        {{nodes}}
      </view>
      <view class="sign-bt">手写签字区</view>
      <view class="sign-wrapper">
        <l-signature disableScroll ref="signatureRef" penColor="black" :penSize="5" :openSmooth="true">
        </l-signature>
      </view>
    </view>
    <button-fixed @submit="handleSubmit">提交审核</button-fixed>
    <canvas type="2d" canvas-id="canvas" id="canvas"></canvas>
  </view>
</template>

<script>
  import { SystemApi, SignImageApi } from '@/api/'
  import { uploadImageApi } from '@/utils/utils/'
  
  export default {
    data() {
      return {
        nodes: '',
        sign_image: null
      };
    },
    methods: {
      handleSubmit() {
        this.$refs.signatureRef.canvasToTempFilePath({
          success: (res) => {
            // 是否为空画板 无签名
            if (res.isEmpty) {
              uni.showToast({
                icon: 'error',
                title: '请先签字'
              })
            } else {
              const sign_img = res.tempFilePath
              uni.getImageInfo({
                src: sign_img,
                success(resu) {
                  console.log(resu)
                }
              })
              return
              // uploadImageApi(res.tempFilePath, (res) => {
              //   this.sign_image = res.data.url
              //   this.submit()
              // })
            }
          }
        })
      },
      submit() {
        const params = { sign_image: this.sign_image }
        SignImageApi(params).then(() => {
          uni.showToast({
            icon: 'success',
            title: '提交成功',
            success() {
              setTimeout(() => {
                uni.switchTab({
                  url: '/pages/mine/mine'
                })
              }, 1200)
            }
          })
        }).catch(() => {})
      }
    },
    onLoad() {
      SystemApi().then(res => {
        this.nodes = res.data['master_agreement']
      })
    }
  }
</script>

<style lang="scss">
.sign-page {
  overflow: hidden;
}
.protol-wrapper {
  overflow: hidden;
  margin-bottom: 48rpx;
  .content {
    padding: 34rpx 30rpx;
    box-sizing: border-box;
    width: 100%;
    font-size: 30rpx;
    line-height: 1.6;
    text-align: justify;
    background-color: #fff;
  }
  .sign-bt {
    font-size: 30rpx;
    line-height: 90rpx;
    padding: 0 30rpx;
    box-sizing: border-box;
  }
  .sign-wrapper {
    margin: 0 30rpx;
    background-color: #fff;
    height: 220rpx;
  }
}
</style>
